<template>
  <div class="content">
    <van-nav-bar :title="className" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <div class="content-middle">
      <div class="left-side">
        <div v-for="(item,index) in leftList" :key="index">
          <span class="item">{{item}}</span>
        </div>
      </div>
      <div class="right-side">
        <div v-for="(item,index) in rightList" :key="index">
          <span class="item">{{item}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        className: "",
        leftList: [],
        rightList: []
      }
    },
    mounted() {
      this.className = this.$route.query.className
      this.initData()
    },
    methods: {
      initData(){
        for(let i=1;i<=100;i++){
          this.leftList.push("第"+i+"项")
        }
        for(let i=1;i<=200;i++){
          this.rightList.push("第"+i+"个数据")
        }
      },
      onClickLeft(){
        this.$router.push("/list")
      }
    }
  }
</script>

<style scoped lang="less">
    .content-middle {
      position: relative;
      width: 100%;
      height: 100%;
      .item {
        height: 40px;
        display: inline-block;
        margin-left: 12px;
      }
      .left-side {
        position: absolute;
        width: 300px;
        height: 100vh;
        overflow-y: auto;
        left: 0;
        top: 0;
        background-color: cadetblue;
      }
      .right-side {
        position: absolute;
        left: 300px;
        width: 100vw;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        background-color: salmon;
      }
    }

</style>